{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>General elements AdminLTE <small>Preview</small></h1>
        </div>
        <div class="row">
        	<div class="col-lg-6">
        		<h3>Quick Example</h3>
        		<form role="form">
        			<div class="form-group">
        				<label>Email address</label>
        				<input type="email" class="form-control" placeholder="Enter email">
        			</div>
        			<div class="form-group">
        				<label>Password</label>
        				<input type="password" class="form-control" placeholder="Password">
        			</div>
        			<div class="form-group">
        				<label>File input</label>
        				<input type="file">
        				<p class="help-block">Example block-level help text here.</p>
        			</div>
        			<div class="checkbox">
        				<label>
        				    <input type="checkbox"> Check me out
        				</label>
        			</div>
        			<button type="submit" class="btn btn-primary">Submit</button>
        		</form>
        		<h3>Different Height</h3>
        		<form role="form">
        			<div class="form-group">
        				<input class="form-control input-lg" type="text" placeholder=".input-lg">
        			</div>
        			<div class="form-group">
        				<input class="form-control" type="text" placeholder="Default input">
        			</div>
        			<div class="form-group">
        				<input class="form-control input-sm" type="text" placeholder=".input-sm">
                    </div>
        		</form>
        		<h3>Different Width</h3>
        		<form role="form">
        			<div class="form-group">
	        			<div class="row">
	        				<div class="col-xs-3">
	        					<input type="text" class="form-control" placeholder=".col-xs-3">
	        				</div>
	        				<div class="col-xs-4">
	        					<input type="text" class="form-control" placeholder=".col-xs-4">
	        				</div>
	        				<div class="col-xs-5">
	        					<input type="text" class="form-control" placeholder=".col-xs-5">
	        				</div>
	        			</div>
        			</div>
        		</form>
        		<h3>Input Addon</h3>
        		<form role="form">
        			<div class="form-group">
        				<div class="input-group">
        				  <span class="input-group-addon">@</span>
        				  <input type="text" class="form-control" placeholder="Username">
        				</div>
        			</div>
        			<div class="form-group">
        				<div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-addon">.00</span>
        				</div>
        			</div>
        			<div class="form-group">
        				<div class="input-group">
                            <span class="input-group-addon">$</span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon">.00</span>
        				</div>
        			</div>
        		</form>
        		<h4>With icons</h4>
        		<form role="form">
        			<div class="form-group">
        				<div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                            <input type="text" class="form-control" placeholder="Email">
        				</div>
        			</div>
        			<div class="form-group">
        				<div class="input-group">
                            <input type="text" class="form-control">
                            <span class="input-group-addon"><i class="fa fa-check"></i></span>
        				</div>
        			</div>
        			<div class="form-group">
        				<div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
                            <input type="text" class="form-control">
                            <span class="input-group-addon"><i class="fa fa-ambulance"></i></span>
        				</div>
        			</div>
        		</form>
        		<h4>With checkbox and radio inputs</h4>
        		<form role="form">
        			<div class="form-group">
	        			<div class="row">
	        				<div class="col-xs-6">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <input type="checkbox">
                                    </span>
                                    <input type="text" class="form-control">
                                </div><!-- /input-group -->
	        				</div>
	        				<div class="col-xs-6">
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <input type="radio">
                                    </span>
                                    <input type="text" class="form-control">
                                </div><!-- /input-group -->
	        				</div>
	        			</div>
        			</div>
        		</form>
        		<h4>With buttons</h4>
        		<form role="form">
        			<div class="form-group">
        				<label>Large <code>.input-group.input-group-lg</code></label>
                        <div class="input-group input-group-lg">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Action <span class="fa fa-caret-down"></span></button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </div><!-- /btn-group -->
                            <input type="text" class="form-control">
                        </div><!-- /input-group -->
        			</div>
        			<div class="form-group">
        				<label>Normal</label>
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-danger">Action</button>
                            </div><!-- /btn-group -->
                            <input type="text" class="form-control">
                        </div><!-- /input-group -->
        			</div>
        			<div class="form-group">
        				<label>Small <code>.input-group.input-group-sm</code></label>
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control">
                            <span class="input-group-btn">
                                <button class="btn btn-info btn-flat" type="button">Go!</button>
                            </span>
                        </div><!-- /input-group -->
        			</div>
        		</form>
        		<h4>Checkbox Buttons</h4>
                <form role="form">
                    <div class="form-group">
                        <label>Inline Checkboxes</label>
                        <div class="btn-group" data-toggle="buttons">
                          <label class="btn btn-default active">
                            <input type="checkbox" autocomplete="off" checked> Checkbox 1
                          </label>
                          <label class="btn btn-default">
                            <input type="checkbox" autocomplete="off"> Checkbox 2
                          </label>
                          <label class="btn btn-default">
                            <input type="checkbox" autocomplete="off"> Checkbox 3
                          </label>
                        </div>
                    </div>
                </form>
        		<h4>Radio Buttons</h4>
                <form role="form">
                    <div class="form-group">
                        <label>Inline Radio Buttons</label>
                        <div class="btn-group" data-toggle="buttons">
                          <label class="btn btn-success active">
                            <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1
                          </label>
                          <label class="btn btn-success">
                            <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
                          </label>
                          <label class="btn btn-success">
                            <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
                          </label>
                        </div>
                    </div>
                </form>
        	</div>
        	<div class="col-lg-6">
        		<h3>General Elements</h3>
        		<form role="form">
        			<div class="form-group">
        				<label>Text</label>
                        <input type="text" class="form-control" placeholder="Enter ..."/>
        			</div>
        			<div class="form-group">
        			    <label>Text Disabled</label>
                        <input type="text" class="form-control" placeholder="Enter ..." disabled/>
        			</div>
        			<div class="form-group">
                        <label>Textarea</label>
                        <textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
        			</div>
        			<div class="form-group">
                        <label>Textarea Disabled</label>
                        <textarea class="form-control" rows="3" placeholder="Enter ..." disabled></textarea>
        			</div>
        			<div class="form-group has-success">
                        <label class="control-label"><i class="fa fa-check"></i> Input with success</label>
                        <input type="text" class="form-control" placeholder="Enter ..."/>
        			</div>
        			<div class="form-group has-warning">
        			    <label class="control-label"><i class="fa fa-warning"></i> Input with warning</label>
                        <input type="text" class="form-control" placeholder="Enter ..."/>
        			</div>
        			<div class="form-group has-error">
        			    <label class="control-label"><i class="fa fa-times-circle-o"></i> Input with error</label>
                        <input type="text" class="form-control" placeholder="Enter ..."/>
        			</div>
                    <!-- checkbox -->
                    <div class="form-group">
                        <label>Checkbox</label>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"/>
                                Checkbox 1
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"/>
                                Checkbox 2
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" disabled/>
                                Checkbox disabled
                            </label>
                        </div>
                    </div>

                    <!-- radio -->
                    <div class="form-group">
                        <label>Radio</label>
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                Option one is this and that&mdash;be sure to include why it's great
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                Option two can be something else and selecting it will deselect option one
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled/>
                                Option three is disabled
                            </label>
                        </div>
                    </div>
                    <!-- select -->
                    <div class="form-group">
                        <label>Select</label>
                        <select class="form-control">
                            <option>option 1</option>
                            <option>option 2</option>
                            <option>option 3</option>
                            <option>option 4</option>
                            <option>option 5</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Select Disabled</label>
                        <select class="form-control" disabled>
                            <option>option 1</option>
                            <option>option 2</option>
                            <option>option 3</option>
                            <option>option 4</option>
                            <option>option 5</option>
                        </select>
                    </div>
                    <!-- Select multiple-->
                    <div class="form-group">
                        <label>Select Multiple</label>
                        <select multiple class="form-control">
                            <option>option 1</option>
                            <option>option 2</option>
                            <option>option 3</option>
                            <option>option 4</option>
                            <option>option 5</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Select Multiple Disabled</label>
                        <select multiple class="form-control" disabled>
                            <option>option 1</option>
                            <option>option 2</option>
                            <option>option 3</option>
                            <option>option 4</option>
                            <option>option 5</option>
                        </select>
                    </div>
        		</form>
        	</div>
        </div>
    </div> <!-- /container -->
{% endblock %}